<!DOCTYPE html>
<html lang="en">
    <head>
        <title>html5新元素</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/style.css" rel="stylesheet">
        <script>
            document.createElement("myNewEle")
        </script>
        <style>
        myNewEle{
            display: block;
            background-color:yellowgreen;
            font-size: 40px
        }
        </style>
    </head>
    <body>
    <myNewEle>我的第一个新元素</myNewEle>

    <h4>canvas元素，属性width和height定义画布大小</h4>
    <h4>canvas元素本身没有绘图能力，必须由脚本来完成绘图</h4>
    <canvas id="mycanvas" width="200" height="200" style="border:1px sold #000000";></canvas>
    
    <script>
        var c=document.getElementById("mycanvas");
        var ctx=c.getContext("2d")
        ctx.fillStyle="#FFFF00" // fillStyle设置为字符串解析为CSS 颜色，
        // 当设置为一个 CanvasGradient 或 CanvasPattern 对象，通过使用指定的渐变或模式来完成填充
        ctx.fillRect(0,0,150,75)
        
        ctx.moveTo(0,0)
        ctx.lineTo(200,200)
        ctx.stroke()
        
        ctx.beginPath()
        ctx.arc(60,60,40,0,2*Math.PI)
        ctx.stroke()

        ctx.fillStyle="#000000"
        ctx.font="30px Arial"
        ctx.fillText("Hello Canvas",10,50)
    </script>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
        <polygon points="100,10 40,180 190,60 10,60 160,180"
        style="fill:lime; stroke:purple; stroke-width:4; fill-rule:evenodd">
    </svg>

    <br/>
    <math xmlns="http://www.w3.org/1998/Math/MathML">
        <mrow>
            <msup><mi>a</mi><mn>2</mn></msup>
            <mo>+</mo>	
            <msup><mi>b</mi><mn>2</mn></msup>
            <mo>=</mo>	
            <msup><mi>c</mi><mn>2</mn></msup>
        </mrow>
    </math>

    <br />
    <p id="cur_pos">您当前位置：</p>
    <script>
        function showpos(pos){
            var p=document.getElementById("cur_pos")
            p.innerHTML="您当前位置：<br/>纬度："+pos.coords.latitude+"<br />经度"+
            pos.coords.longitude
        }
        // 获取位置时间比较久，函数传入获取位置成功时的回调函数
        navigator.geolocation.getCurrentPosition(showpos)
    </script>

    <video width="320" controls>
        <source src="f:/12-25+深圳铂爵+04+19个+原片.mp4" type="video/mp4">
    </video>

    <br/>
    <br/>
    <audio controls>
        <source src="2010 - 世界杯.mp3">
    </audio>

    <br/>
    <input type="color" name="favcolor">

    <br/>
    <input type="range" name="rand">

    



    </body>
</html>


